<template>
  <div class="container-specialSessionDetails">
    <el-breadcrumb separator="/" class="mb15">
      <el-breadcrumb-item :to="{ name: 'special-session' }">专场管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ tabName }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="title">
      {{ title }}
    </div>
    <div class="wxkj-tab">
      <el-tabs v-model="state" @tab-click="tabNameSelected">
        <el-tab-pane label="职位" name="0">
          <position :special-session-id="specialSessionId" class="content" />
        </el-tab-pane>
        <el-tab-pane label="人才" name="1">
          <personnel :special-session-id="specialSessionId" :from="'ADMIN_专场'" class="content" />
        </el-tab-pane>
        <el-tab-pane label="招聘数据" name="2">
          <statistics ref="statistics" :special-session-id="specialSessionId" class="content" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import position from './position'
import personnel from './personnel'
import statistics from './statistics'
export default {

  name: 'SpecialSessionDetails',
  components: { position, personnel, statistics },
  props: {},
  data() {
    return {
      title: '',
      tabName: '职位',
      state: 0,
      specialSessionId: ''
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    const params = this.$route.params
    if (params.id) {
      this.state = params.tabId + ''
      this.specialSessionId = params.id
      this.title = params.title
      this.tabNameSelected()
    } else {
      this.$router.push({ name: 'special-session-list' })
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    tabNameSelected(e) {
      const state = this.state
      if (state == '0') {
        this.tabName = '职位'
      } else if (state == '1') {
        this.tabName = '人才'
      } else if (state == '2') {
        this.tabName = '招聘数据'
        this.$refs.statistics.initView()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
    .container-specialSessionDetails{padding: 20px 0; padding-top: 15px;
      .title{
          background: url("../../../assets/images/001.png");background-size:100% 100%;height: 100px;font-size: 20px;font-weight: bold;line-height: 100px;text-align: center;color: #fff;
      }
      .content{
        margin-top: 15px;
      }
    }
</style>
